<template>
  <el-dialog
    :title="title"
    :visible.sync="innerdialogVisible"
    :close-on-click-modal="false"
    @close="closeDialog"
    @open="openDialog"
    width="40%"
  >
    <hr class="hrline" />
    <el-form :model="formdata" label-width="100px" label-position="left">
      <el-form-item label="名字">
        <el-input
          name="name"
          v-model="formdata.name"
          v-validate="'required'"
          data-vv-as="名字"
          auto-complete="off"
        ></el-input>
        <span class="error">{{ errorBags.first('name')}}</span>
      </el-form-item>

      <el-form-item label="费用/时">
        <el-input-number v-model="formdata.chargeperhour" :min="0" :max="10000" label="费用/时"></el-input-number>
      </el-form-item>

      <el-form-item label="容纳人数">
        <el-input-number v-model="formdata.capacity" :min="1" :max="10000" label="容纳人数"></el-input-number>
      </el-form-item>

      <el-form-item label="场所">
        <el-select v-model="formdata.buildingid" placeholder="请选择">
          <el-option v-for="item in buildings" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设施">
        <el-checkbox-group style="line-height:40px" v-model="formdata.facilities">
          <el-checkbox
            v-for="item in this.facilities"
            :key="item.id"
            :label="item.id"
            :value="item.id"
          >{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="开放时间">
        <el-time-select
          v-model="formdata.opentime"
          :picker-options="{start: '07:30',step: '00:15',end: '22:30' }"
        ></el-time-select>
      </el-form-item>
      <el-form-item label="关闭时间">
        <el-time-select
          v-model="formdata.closetime"
          :picker-options="{start: '07:30',step: '00:15',end: '22:30' }"
        ></el-time-select>
      </el-form-item>
      <el-form-item label="周末有效">
        <el-switch
          class="mt-10"
          v-model="formdata.avaliableweekends"
          active-color="#13ce66"
          inactive-color="#ff4949"
        ></el-switch>
      </el-form-item>

      <el-form-item label="显示顺序">
        <el-input v-model="formdata.showorder" type="number" placeholder></el-input>
      </el-form-item>

      <el-form-item label="会议室图片">
        <el-upload
          ref="upload"
          :limit="1"
          :headers="header"
          class="uploader"
          action="/api/meetingroom/upload"
          :show-file-list="false"
          :on-success="handleFileUploadSuccess"
        >
          <img v-if="formdata.pictureurl" :src="formdata.pictureurl" class="mrpic" />
          <i v-else class="el-icon-plus uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button v-if="displaytype=='view'" @click="innerdialogVisible = false">关闭</el-button>
      <el-button v-else @click="innerdialogVisible = false">取消</el-button>
      <el-button v-if="displaytype!='view'" type="primary" @click="submitClick">提交</el-button>
    </span>
  </el-dialog>
</template>
<script>
import store from "../store";
import axios from "axios";

export default {
  name: "meetingroomdialog",
  data() {
    var self = this;
    return {
      buildings: [],
      facilities: [],
      innerdialogVisible: false,
      formdata: {}
    };
  },
  props: {
    displaytype: { type: String, required: true },
    dialogvisible: { type: Boolean, required: true },
    totalnumber: { type: Number, required: true },
    meetingroomid: { type: Number }
  },
  methods: {
    closeDialog() {
      this.errorBags.clear();
      this.formdata = {
        name: "",
        pictureurl: "",
        chargeperhour: 0,
        capacity: 5,
        buildingid: "",
        facilities: [],
        opentime: "08:30",
        closetime: "18:30",
        avaliableweekends: true,
        showorder: this.totalnumber + 1
      };
      this.$refs.upload.clearFiles();
      this.$emit("update:dialogvisible", this.innerdialogVisible);
    },
    openDialog() {
      var self = this;
      if (this.displaytype != "add") {
        axios
          .all([
            axios.get("/api/building"),
            axios.get("/api/facility"),
            axios.get("/api/meetingroom/" + self.meetingroomid)
          ])
          .then(
            axios.spread(function(buidingResp, facilityResp, meetingroomResp) {
              self.buildings = buidingResp.data.data;
              self.facilities = facilityResp.data.data;
              self.formdata = meetingroomResp.data.data;
            })
          );
      } else {
        axios
          .all([axios.get("/api/building"), axios.get("/api/facility")])
          .then(
            axios.spread(function(buidingResp, facilityResp) {
              self.buildings = buidingResp.data.data;
              self.facilities = facilityResp.data.data;
              self.formdata = {
                name: "",
                pictureurl: "",
                chargeperhour: 0,
                capacity: 5,
                buildingid: "",
                facilities: [],
                opentime: "08:30",
                closetime: "18:30",
                avaliableweekends: true,
                showorder: self.totalnumber + 1
              };
            })
          );
      }
    },
    submitClick() {
      this.$validator.validate().then(valid => {
        if (!valid) {
          // do stuff if not valid.
          return;
        } else {
          axios
            .post("/api/meetingroom", this.formdata)
            .then(response => {
              this.innerdialogVisible = false;
              this.$emit("success", response.data.data);
            })
            .catch(ex => {
              console.log(ex);
            });
        }
      });
    },
    handleFileUploadSuccess(response, file, fileList) {
      this.formdata.pictureurl = response.data;
    }
  },
  computed: {
    title: function() {
      if (this.displaytype == "view") {
        return "查看会议室";
      } else if (this.displaytype == "add") {
        return "新增会议室";
      } else {
        return "修改会议室";
      }
    },
    header: function() {
      if (store.state.auth) {
        return { Authorization: `Bearer ${store.state.auth.access_token}` };
      }
    }
  },
  watch: {
    dialogvisible(newValue) {
      this.innerdialogVisible = newValue;
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.page-building {
  .hrline {
    height: 3px;
    margin-top: -35px;
    background-color: #d7195d;
    border: none;
  }
  .el-form-item {
    width: 80%;
  }

  .line {
    text-align: center;
    line-height: 37px;
  }

  .error {
    color: #d7195d;
    font-size: 12px;
    padding-left: 10px;
    line-height: 12px;
    padding-top: 4px;
  }
  .uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .uploader .el-upload:hover {
    border-color: #409eff;
  }
  .uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 78px;
    height: 78px;
    line-height: 78px;
    text-align: center;
  }
  .mrpic {
    width: 78px;
    height: 78px;
    display: block;
  }
  .el-date-editor,
  .el-input-number,
  .el-select {
    width: 100%;
  }
}
</style>